<style lang="scss" scoped>

.user-complete {
	background-color: #F24244;
	padding: 150rpx 0 95rpx 0;
}

.user-complete-icon {
	width: 100rpx;
	height: 100rpx;
	margin: 0 auto;
	display: block;
}

.user-complete-title {
	$height: 53rpx;
	height: $height;
	line-height: $height;
	font-size: $height;
	font-weight: bold;
	color: #FFF;
	text-align: center;
	margin: 36rpx 0 59rpx 0;
}

.user-complete-back {
	width: 299rpx;
	height: 89rpx;
	line-height: 89rpx;
	border: 2rpx solid #FFF;
	border-radius: 45rpx;
	font-size: 32rpx;
	color: #FFF;
	margin: 0 auto;
}

.user-complete-countdown {
	$height: 24rpx;
	height: $height;
	line-height: $height;
	font-size: $height;
	color: #FFF;
	text-align: center;
	margin-top: 18rpx;
}

</style>

<template>
	<view class="user-complete">

		<!-- 图标 -->
		<image class="user-complete-icon" src="/static/r-gou.png" />

		<!-- 标题 -->
		<view class="user-complete-title">银行卡绑定成功</view>
		
		<!-- 立即返回 -->
		<button class="user-complete-back" @click="$navigateBack()">立即返回</button>

		<!-- 倒计时 -->
		<view class="user-complete-countdown"><text v-text="countdown"></text>s后自动返回</view>

	</view>
</template>

<script>
export default {

	data() {
		return {
			countdown: 5,
		}
	},

	created() {
		this.initCountdown();
	},

	methods: {

		/**
		 * 初始化倒计时
		 */
		initCountdown() {
			if (0 >= this.countdown) {
				return uni.navigateBack();
			}

			setTimeout(() => {
				--this.countdown;
				this.initCountdown();
			}, 1000);
		},

	}
	
}
</script>